El comportamiento que busco implementar envolvería cada palabra que el usuario escriba en <div class="word"></div> mientras escribe su mensaje. El div principal en el que están escribiendo tiene contenteditable="true".

Un factor de complicación es que, para este caso de uso, un div de "palabra" puede contener dos palabras (imagine que un nombre se consideraría una "palabra", por ejemplo, puede aparecer <div class="word">Bob Smith</div>). Esto significa que no puedo tomar todo el contenido del texto cuando el usuario presiona espacio y divide (" ") en una matriz para construir los elementos DOM div.word.

Estoy pensando que cuando el usuario presiona espacio, puedo obtener todos los nodos secundarios del div editable y recorrerlos para verificar cuál es un nodo de texto y cuál no (es decir, una palabra ya envuelta en div.word). Luego, solo para los nodos de texto, puedo crear un elemento DOM div.word y agregar todos estos al div editable.

Espero que esté claro. Aquí es donde estoy:

 <div id="editor" contenteditable></div>

 #editor { border: 1px solid #333; padding: 10px; } #editor .word { background: yellow; display: inline-block; }

 const editorElement = document.getElementById('editor'); function handleSpacebarPress() { // Get all editor child nodes let editorChildNodes = [...editor.childNodes]; // Clear editor of all child nodes editor.innerHTML = ''; editorChildNodes.forEach(node => { // If node is a text node (not a div.word element) if (node.nodeType === 3) { // Create div.word let wordDiv = document.createElement('div'); wordDiv.className = 'word'; wordDiv.textContent = node.textContent; editor.appendChild(wordDiv); } // Else node is already a div.word element else { editor.appendChild(node); } }); // Return caret to end of editor const editorLength = editor.childNodes.length; const lastNode = editor.childNodes[editorLength - 1]; // Last editor node const range = document.createRange(); const selection = window.getSelection(); range.setStart(lastNode, 1); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); } editorElement.addEventListener('keydown', e => { if (e.code === 'Space') { handleSpacebarPress(); } });

Puede ver esto en jsfiddle aquí .

En este momento, parece que solo coloca todas las palabras directamente en el elemento div.word y parece que no puedo manejar la creación de una nueva para cada palabra.

¿Algunas ideas?